---
const { title, img, desc, url, badge, tags, target = "_blank" } = Astro.props;
import { Image } from "astro:assets";
---

<div class="md:w-1/3 w-full">
  <a href={url} target={target}>
    <div class="card bg-base-100 transition ease-in-out hover:shadow-xl mx-6 my-2 hover:scale-[102%]">
      <Image width={750} height={422} format="webp" src={img} alt={title} />
      <div class="card-body">
        <h2 class="card-title">
          {title}
          {badge && <div class="badge badge-secondary">{badge}</div>}
        </h2>
        <p>{desc}</p>
        <div class="card-actions justify-end">
          {tags && tags.map((tag) => <div class="badge badge-outline">{tag}</div>)}
        </div>
      </div>
    </div>
  </a>
</div>

